<!-- 在App.vue总要写三个标签，template负责html，script负责js，style负责样式 -->
<template>
  <div class="person">
    123
  </div>
</template>


<script setup name="Person" lang="ts">//加上setup就是语法糖，自动返回，但是组件名要另外写，通过name属性来设置
import { reactive, ref, toRef, toRefs, watch, watchEffect } from 'vue'
import { type PersonInter, type Persons } from '@/types'
// 这里因为PersonInter不是常规类型， 需要加上type
  let person:PersonInter = {// 使用PersonInter来限制接口内容
    id: 'zhangsan',
    name: 'lis',
    age: 18
  }

  let personList: Array<PersonInter> = [
    {id: '1231', name: 'zhang', age: 1},
    {id: '24', name: 'lis', age: 2}
  ]
  // let personList: Persons = [
  //   {id: '1231', name: 'zhang', age: 1},
  //   {id: '24', name: 'lis', age: 2}
  // ]使用自定义类型
</script>


<style scoped> 
  .person {
    width: 100%;
    height: 100%;
    background-color: pink;
  }
</style>
